<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Marvel Animation</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #btn {
            cursor: pointer;
            background-color: #353535;
            padding: 50px 100px;
            color: white;
            position: absolute;
            left: 46%;
            top: 40%;
            font-size: 32px;
        }

        .hide {
            display: none;
        }

        video {
            width: 300px;
        }
    </style>
</head>

<body>
    <script src="three.min.js"></script>
    <script src="OrbitControls.js"></script>
    <script src="init.js"></script>
    <script>

        startAll();

        function startAll() {
            //初始化场景
            /******start of init.js******/
            initScene();
            initRender();
            initOrthCamera();//正交相机
            initLight(AMBIENT_LIGHT);
            initControls();//初始化控制器，调试用
            /******end of init.js******/
            initFontModel();
        }


        //字体模型
        function initFontModel() {

            var loader = new THREE.FontLoader();
            //加载字体
            loader.load("http://localhost:3334/assets/font/helvetiker_bold.typeface.json", function (font) {

                //生成字体
                textGeometry = new THREE.ExtrudeGeometry(calcShape(font), {
                    depth:10,
                    bevelEnabled: false,
                    curveSegments: 4
                });

                shapeGeometry = new THREE.ShapeGeometry(calcShape(font));

                let material = new THREE.MeshLambertMaterial({ color: 0x666666 });

                //object
                cube = new THREE.Mesh(textGeometry, material);
                //shape
                shape = new THREE.Mesh(shapeGeometry, material);
                //立体模型
                scene.add(cube);
                //平面模型
                //scene.add(shape);

                //开始渲染
                render();
            });
        }

        /*在平面上生成镂空字体*/
        function calcShape(font) {
            fontShape = font.generateShapes('M',40);
            boxShape = new THREE.Shape();
            boxShape.moveTo(-20,-20);
            boxShape.lineTo(50,-20);
            boxShape.lineTo(50,50);
            boxShape.lineTo(-20,50);
            boxShape.lineTo(-20,-20);
            boxShape.holes.push(fontShape[0]);
            return boxShape;
        }

    </script>
</body>

</html>